<template>
    <div>
        <el-container>
            <el-header>
                <start-header />
            </el-header>
            <el-main>
                <div class="body">
                    <div class="body_1">
                        <div class="body_1_1">
                            <img v-image-preview :src="avatar" style="margin-top:10px" class="PersonImg"/>
                        </div>
                        <div class="body_1_2">
                            <div class="text1"><span> {{ username }} </span></div>
                            <div class="text2">
                                <span class="fa fa-check" style="color:#FAD141"></span>
                                <span class="user-v-font">正式用户</span>
                            </div>
                            <div class="user_qianming">
                                <span> {{ design }}</span>
                            </div>
                            <div class="user_bianji">
                                <el-button @click="edit">编辑</el-button>
                            </div>                  
                        </div>
                    </div>
                    <div class="body_2">
                        <div class="body_2_1">
                            <div class="bb">个人中心</div>
                            <hr />
                            <div class="fonts" @click="choose1"><span class="fa fa-user-circle" style="color:grey"></span> 个人信息</div>
                            <div class="fonts" @click="choose2"><span class="fa fa-clock-o" style="color:grey"></span> 刷题记录</div>
                            <div class="fonts" @click="choose3"><span class="fa fa-book" style="color:grey"></span> 笔记</div>
                            <div class="fonts" @click="choose4"><span class="fa fa-bookmark" style="color:grey"></span> 收藏</div>
                            <div class="fonts" @click="choose5"><span class="fa fa-tags" style="color:grey"></span> 订单</div>
                            <div class="fonts" @click="choose6"><span class="fa fa-address-book-o" style="color:gray"></span> 地址管理</div>
                        </div>
                        <div v-if="geren==1" class="body_2_2">
                            <div class="body_2_2_1">
                                <my-info />
                            </div>

                        </div>
                        <div v-if="geren==2" class="body_2_2">
                            刷题记录
                        </div>
                        <div v-if="geren==3" class="body_2_2">
                            笔记
                        </div>
                        <div v-if="geren==4"  class="body_2_2">
                            收藏
                        </div>
                        <div v-if="geren==5"  class="body_2_2">
                            订单
                        </div>
                        <div v-if="geren==6"  class="body_2_2">
                            地址管理
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <start-footer />
            </el-footer> 
        </el-container>
        <div>
        </div>
    </div>
</template>

<script>
import Manage from '../Manage/Manage.vue';
import Table from '../other/Table/Table.vue';
import StartFooter from '../StartCommon/StartFooter.vue';
import StartHeader from '../StartCommon/StartHeader.vue'
import MyInfo from './MyInfo.vue';

    export default{
  components: { StartHeader, Table, StartFooter, Manage,MyInfo },
        data() { 
            return { 
                dialogvisible: false,
                avatar: require("../../common/images/05.jpg"),
                username:"用户名" ,
                design:"写代码使我快乐",
                geren:1,
            }; 
        },
        methods:{
            edit() {
                this.$router.push('/PersomDia')
            },
            choose1(){
                this.geren=1    
            },
            choose2(){
                this.geren=2
            },
            choose3(){
                this.geren=3
            },
            choose4(){
                this.geren=4
            },
            choose5(){
                this.geren=5
            },
            choose6(){
                this.geren=6
            }
        }
    }
</script>

<style scoped>
    html,#app,body,.el-container{
        height: 100%;
    }
    .el-header{ 
        background-color: #DCE4F1;
        color: #333; 
        text-align: center; 
        line-height: 100px;
    }
    .el-main { 
        background-color: #F5F5F5; 
        color: #333; 
        text-align: center; 
        line-height: 50px; 
    }
    .el-footer { 
        background-color: #F5F5F5;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        height: 185px !important; 
    }    
    .body{
        margin-top: 15px;
        width:100%;
        height: 100%;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        display: -webkit-flex;
        /* display: flex; */
        box-sizing: border-box;
        margin-bottom: 20px; 
    }
    .body_1{
        width:60%;
        background-color: white;
        text-align: center;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #d9d9d9;
        display: -webkit-flex;
        /* align-items: center; */
        flex-direction: row; 
    }
    .body_1_1{
        padding-top: 30px;
        width: 200px;
        margin-left: 50px;
    }
    .body_1_2{
        padding-top: 30px;
        width: 200px;
        line-height: 50px;
    }
    .PersonImg{
        padding-bottom: 20px;
        height: 200px;
        width: 200px;
    }
    .text1{
        font-size: 20px;
        /* line-height:40px; */
        text-align: left;
        margin-left: 30px;
    }
    .text2{
        font-size: 15px;
        /* line-height:40px; */
        text-align: left;
        margin-left: 30px;
    }
    .user-v-font{
        color:#00c3ff;
    }
    .user_qianming{
        text-align: left;
        margin-left: 30px;
        font-size: 10px;
        color: darkgrey;
    }
    .user_bianji{
        text-align: left;
        margin-left: 30px;
    }
    
    .body_2{
        margin-top: 30px;
        width:60%;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        display: -webkit-flex;
        /* align-items: center; */
        flex-direction: row; 
    }
    .body_2_1{
        background-color: white;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #d9d9d9;
        margin-right: 20px;
        flex:1;
    }
    .body_2_2{
        background-color: white;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #d9d9d9;
        flex:3;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        /* flex-direction: column; */

    }
    .body_2_2_1{
        text-align: center;
        width: 100%;
    }
    .fonts{
        font-size: 18px;
        color:grey;
    }
    .bb{
        margin-top: 10px;
        font-size: 20px;
        font-weight: bold;
        color:midnightblue;
    }

    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        width: 100%;
    }

</style>